<template>
    <div class="container">
        <!-- 左侧面板 -->
        <div class="leftBox">
            <!-- 事故类型分析 -->
            <div class="panel-box bridge-info-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">事故类型分析</span>
                </div>
                <div class="info-list">
                    <BasicEchart :option="typeOption" />
                </div>
            </div>

            <!-- 事故诱因 -->
            <div class="panel-box record-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">事故诱因</span>
                </div>
                <div class="incentive">
                    <BasicEchart :option="incentiveOption" />
                </div>
            </div>

            <!-- 交通事故数据统计 -->
            <div class="panel-box traffic-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">交通事故数据统计</span>
                </div>
                <div class="traffic">
                    <BasicEchart :option="trafficOption" />
                </div>
            </div>
        </div>

        <!-- 中间区域 -->
        <div class="centerBox">
            <!-- <Map/> -->
        </div>

        <!-- 右侧面板 -->
        <div class="rightBox">
            <!-- 灾害预警 -->
            <div class="panel-box warning-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">灾害预警</span>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;height: 80%;">
                    <div class="warning-grid">
                        <div class="data">
                            <img class="img" src="@/assets/imgs/path/暂无信息.png" alt="暂无信息">
                            <div class="text">暂无预警信息</div>
                        </div>
                        <div class="time">
                            <img class="img" src="@/assets/imgs/path/时钟.png" alt="时钟">
                            <div class="text">
                                <div class="label">检测预警时间</div>
                                <div class="label">2024-03-18 10:00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 历年灾害情况 -->
            <div class="panel-box years-panel" style="flex: 3;">
                <div class="panel-title">
                    <span class="title-text">历年灾害情况</span>
                </div>
                <div class="years-grid">
                    <BasicEchart :option="yearsOption" />
                </div>
            </div>


            <!-- 历史事故 -->
            <div class="panel-box history-panel" style="flex: 3;">
                <div class="panel-title">
                    <span class="title-text">历史事故</span>
                </div>
                <div class="history-grid">
                    <BasicTable :columns="historyColumns" :data="historyData" :isPage="false" height="330">
                    </BasicTable>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { h, ref } from 'vue'
import { ElButton } from 'element-plus'
import * as echarts from 'echarts';

// 事故类型分析
const typeOption = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087"],
    tooltip: {
        valueFormatter: function (value) {
            return value + " 次";
        },
        trigger: "axis",
        axisPointer: {
            type: "cross",
            label: {
                backgroundColor: "#6a7985",
            },
        },
    },
    legend: {
        data: ["交通事故", "自然灾害", "道路阻塞", "其他类型"],
        textStyle: {
            color: "#9C9DC8FF",
            fontSize: 15, // 设置字体大小
        },
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
            ],
        },
    ],
    yAxis: [
        {
            type: "value",
            data: ["0", "10", "20", "30", "40", "50", "60", "70"],
            name: "(次)",
        },
    ],
    series: [
        {
            name: "交通事故",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(128, 255, 165)",
                    },
                    {
                        offset: 1,
                        color: "rgb(1, 191, 236)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: [40, 32, 65, 50, 48, 34, 25, 30, 35, 30, 54, 55],
        },
        {
            name: "自然灾害",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(0, 221, 255)",
                    },
                    {
                        offset: 1,
                        color: "rgb(77, 119, 255)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: [20, 28, 11, 34, 55, 48, 52, 59, 72, 14, 55, 50],
        },
        {
            name: "道路阻塞",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(55, 162, 255)",
                    },
                    {
                        offset: 1,
                        color: "rgb(116, 21, 219)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: [32, 13, 21, 34, 10, 13, 22, 14, 18, 55, 70, 33],
        },
        {
            name: "其他类型",
            type: "line",
            smooth: true,
            lineStyle: {
                width: 0,
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgb(255, 0, 135)",
                    },
                    {
                        offset: 1,
                        color: "rgb(135, 0, 157)",
                    },
                ]),
            },
            emphasis: {
                focus: "series",
            },
            data: [30, 40, 21, 34, 65, 42, 55, 50, 48, 65, 45, 66],
        },
    ],
};
// 事故诱因
const color = [
    "#00ffff",
    "#00cfff",
    "#006ced",
    "#ffe000",
    "#ffa800",
    "#ff5b00",
    "#ff3000",
];
const trafficWay = [
    {
        name: "环形路口",
        value: 20,
    },
    {
        name: "机动车碰擦",
        value: 10,
    },
    {
        name: "车辆掉头",
        value: 30,
    },
    {
        name: "车辆超速",
        value: 40,
    },
]
const data = trafficWay.map((item, index) => [
    {
        value: item.value,
        name: item.name,
        itemStyle: {
            normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[index], // 颜色数组通过索引动态获取
                shadowColor: color[index]
            }
        }
    },
    {
        value: 2,
        itemStyle: {
            normal: {
                label: { show: false },
                labelLine: { show: false },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0
            }
        }
    }
]).flat();
const series = [
    {
        type: "pie",
        clockWise: false,
        radius: [65, 75],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: "outside",
                    color: "#9C9DC8FF",
                    fontSize: 14,
                    formatter: function (params) {
                        let percent = 0;
                        let total = 0;
                        for (let i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== "") {
                            return (
                                "诱因: " +
                                params.name +
                                "\n" +
                                "\n" +
                                "占百分比：" +
                                percent +
                                "%"
                            );
                        } else {
                            return "";
                        }
                    },
                },
                labelLine: {
                    length: 20,
                    length2: 50,
                    show: true,
                    color: "#00ffff",
                },
            },
        },
        data: data,
    },
];
const incentiveOption = {
    color: color,
    tooltip: {
        show: false,
    },
    grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        top: "0%",
    },
    legend: {
        icon: "circle",
        data: ["环形路口", "机动车碰擦", "车辆掉头", "车辆超速"],
        align: "left",
        textStyle: {
            color: "#9C9DC8FF",
            fontSize: 14,
        },
        y: "bottom",
        itemGap: 20,
    },
    toolbox: {
        show: false,
    },
    series: series,
};

// 交通事故数据统计
const trafficOption = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        top: "12%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
            ],
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
            axisTick: {
                alignWithLabel: true,
            },
        },
    ],
    yAxis: [
        {
            name: "(次)",
            minInterval: 1,
            nameTextStyle: {
                fontSize: 15,
                color: "#9C9DC8FF",
            },
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "#9C9DC8FF",
                    fontSize: 15, // 设置字体大小
                },
            },
        },
    ],
    series: [
        {
            name: "交通事故次数",
            type: "bar",
            barWidth: "60%",
            data: [2, 1, 0, 1, 0, 0, 1, 0, 2, 1, 0, 1],
        },
    ],
};

// 历年灾害情况
const yearsOption = {
    color: ["#4472C5", "#ED7C30", "red", "#879AD7", "#800080"],
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: ["地震", "暴雨", "干旱", "寒潮", "洪涝"],
        textStyle: {
            color: "#ABB1DCFF",
            fontSize: "16",
        },
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
        axisLabel: {
            color: "#ABB1DCFF",
            fontSize: "16",
        },
    },
    yAxis: {
        type: "value",
        axisLabel: {
            color: "#ABB1DCFF",
            fontSize: "16",
        },
    },
    series: [
        {
            name: "地震",
            type: "line",
            stack: "Total",
            data: [0, 1, 0, 2, 1, 1, 0],
            smooth: true,
        },
        {
            name: "暴雨",
            type: "line",
            stack: "Total",
            data: [1, 0, 2, 1, 0, 1, 0],
            smooth: true,
        },
        {
            name: "干旱",
            type: "line",
            stack: "Total",
            data: [1, 0, 0, 0, 1, 0],
            smooth: true,
        },
        {
            name: "寒潮",
            type: "line",
            stack: "Total",
            data: [2, 1, 0, 0, 2, 1, 1],
            smooth: true,
        },
        {
            name: "洪涝",
            type: "line",
            stack: "Total",
            data: [0, 1, 0, 1, 0, 1, 1],
            smooth: true,
        },
    ],
};

// 历史事故
const historyColumns = [
    {
        prop: 'id',
        label: '序号'
    },
    {
        prop: 'temperature',
        label: '事故类型'
    },
    {
        prop: 'power',
        label: '事故时间'
    },
    {
        prop: '事故状态',
        label: '位置'
    },
]
const historyData = ref([
    {
        id: '1',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '2',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '3',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '4',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '5',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '6',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '7',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '8',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '9',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '10',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '11',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '12',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '13',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
])

</script>

<style lang="scss" scoped>
.container {
    background: #001529;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // padding: 16px;
    gap: 16px;
    overflow: hidden;
    position: relative;

    .leftBox,
    .rightBox {
        width: 650px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        z-index: 9;
    }

    .centerBox {
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 100%;

    }
}

.panel-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    flex: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(64, 224, 208, 0.1);

    .panel-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 16px;
        position: relative;
        padding-left: 24px;
        color: #40E0D0;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: #40E0D0;
            border-radius: 2px;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0px;
            right: 0;
            // top: 50%;
            bottom: -10px;
            height: 1px;
            background: linear-gradient(90deg, #40E0D0, transparent);
        }
    }

    // 事故类型分析
    &.bridge-info-panel {
        .info-list {
            height: 90%;
            width: 100%;
        }
    }

    // 事故诱因
    &.record-panel {
        .incentive {
            height: 90%;
            width: 100%;
        }
    }

    // 交通事故数据统计
    &.traffic-panel {
        .traffic {
            height: 90%;
            width: 100%;
        }
    }

    // 灾害预警
    &.warning-panel {
        .warning-grid {
            // margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;

            .data {
                display: flex;
                align-items: center;
                gap: 12px;

                .img {
                    width: 50px;
                    height: 50px;
                }

                .text {
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.6);
                }
            }

            .time {
                display: flex;
                align-items: center;
                gap: 12px;

                .img {
                    width: 30px;
                    height: 30px;
                }

                .text {
                    .label {
                        color: rgba(255, 255, 255, 0.6);
                        font-size: 12px;

                        &:last-child {
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                }
            }

        }
    }

    // 设备概览
    &.years-panel {
        .years-grid {
            height: 90%;
            width: 100%;
        }
    }

    // 历史事故
    &.history-panel {
        .history-grid {
            height: 100%;
            width: 100%;
        }
    }
}
</style>